<template>
  <div id="sortBox">
      <div class="sortItemBox" @click="sortResult(1)">预期年化
        <SortArrow ref="year" :status1="yearStatus"></SortArrow>
      </div>
      <Line1 len=".5rem" style="margin-top:.18rem"></Line1>
      <div class="sortItemBox" @click="sortResult(3)">最高返利
        <SortArrow ref="back" :status1="backStatus"></SortArrow>
      </div>
      <Line1 len=".5rem" style="margin-top:.18rem"></Line1>
      <div class="sortItemBox" @click="sortResult(2)">投资期限
        <SortArrow ref="time" :status1="timeStatus"></SortArrow>
      </div>
      <!-- <Line1 len=".5rem" style="margin-top:.18rem;margin-right:.3rem"></Line1> -->
  </div>
</template>
<script>
import Line1 from '../../../component/common/Line'
import SortArrow from './SortArrow'

export default {
  components:{
    Line1,
    SortArrow
  },
  data(){
    return {
      yearStatus:2,
      timeStatus:2,
      backStatus:2,
      sortType:0,
      currentType:0
    }
  },
  methods:{
    sortResult(type){
      this.getSortTpye(type)
      switch(type){//改变排序的状态
        case 1:
          this.yearStatus++
          if(this.yearStatus > 2){
            this.yearStatus = 0
          }
          this.timeStatus=2
          this.backStatus=2
        break;
        case 2:
          this.timeStatus++
          if(this.timeStatus > 2){
            this.timeStatus = 0
          }
          this.yearStatus=2
          this.backStatus=2
        break;
        case 3:
          this.backStatus++
          if(this.backStatus > 2){
            this.backStatus = 0
          }
          this.timeStatus=2
          this.yearStatus=2
        break;
      }
    },
    getSortTpye(type){//获取排序类型
      if(this.currentType != type){
        this.sortType = 0
      }
      this.currentType = type

      if(this.sortType == 0){
        this.sortType = type*2-1
      }else{
        this.sortType++
      }

      if(this.sortType > type*2){
        this.sortType = 0
      }
      this.$emit('getSort1',this.sortType)
    }
  }
}
</script>
<style lang="less">
  #sortBox{
    height: 0.88rem;
    // background-color: tan;
    display: flex;
    justify-content: space-between;
    .sortItemBox{
      width: 31%;
      height: .88rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: .37rem;
      // margin-right: .3rem;
    }
  }
</style>
